<template>
  <div class="clazz-main">
    <!-- 搜索开始 -->
    <el-card>
      <div slot="header">
        <span>搜索条件</span>
      </div>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-input v-model="search.className" placeholder="班级查询" style="width:220px"></el-input>
        </el-col>
        <el-col :span="12" style="text-align:right">
          <span>
            <el-button type="primary" @click="doSearch" size="small">查询</el-button>
            <el-button type="primary" @click="doReset" plain size="small">重置</el-button>
          </span>
        </el-col>
      </el-row>
    </el-card>

    <!-- 班级列表展示开始 -->
    <el-card>
      <div slot="header">
        <span>表格数据</span>
        <el-button type="primary" style="float:right" size="small" @click="addInfo">添加班级信息</el-button>
      </div>
      <el-table :data="classList" border style="width: 100%" v-loading="loading">
        <el-table-column label="#" fixed type="index"></el-table-column>
        <el-table-column  prop="className" label="班级名称" width="160"></el-table-column>
        <el-table-column prop="type" label="班级类型" width="90"></el-table-column>
        <el-table-column prop="desc" label="班级描述" width="180"></el-table-column>
        <el-table-column prop="startTime" label="开始时间"  width="200" ></el-table-column>
        <el-table-column prop="endTime" label="结束时间"   width="200" ></el-table-column>
        <el-table-column prop="addTime" label="添加时间" width="200"></el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
            <el-button type="text" size="small" style="color:orange" @click="doEdit(scope.row.id)">编辑</el-button>
            <el-button type="text"  style="color:red" size="small" @click="doDel((scope.row.id))">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
      style="float:right"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.start"
      :page-sizes="page.sizes"
      :page-size="page.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.totalcount">
    </el-pagination>
    </el-card>

    <Detail ref="detail" @resfrsh-list='getClassList'/>
  </div>
</template>

<script>
import {classList,classDel} from '@/api/system/clazz'
import Detail from './Detail'
import _ from 'lodash'
export default {
   components:{
      Detail
   },
  data() {
    return {
      search: {},
      classList:[],
      page:{
         start:1,
         limit:10,
         sizes:[10,20,30],
         totalcount:0
      },
      loading:false

    };
  },
  created() {
      this.getClassList()
  },
  methods: {
    doSearch() {
       this.getClassList()
       this.page.start=1
    },
    doReset() {
      this.search={}
    },
    handleClick(){},
    getClassList(){
       this.loading=true
       var params={
          start:this.page.start,
          limit:this.page.limit,
          ...this.search
       }
       params=_.pickBy(params,item=>item);
       _.pickBy(params,function(v){
          return v
       })
       classList(params).then(res=>{
          this.classList=res.data.list
          this.page.totalcount=res.data.totalRow
          this.loading=false
       })
    },
    handleSizeChange(val){
        console.log(`每页 ${val} 条`);
        this.page.limit=val
        this.getClassList()
    },
    handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.page.start=val
        this.getClassList()

      },
      addInfo(){
         this.$refs.detail.openDialog()      
      },
      doEdit(id){
         this.$refs.detail.openDialogShow(id)
         // console.log(id);
      },
      doDel(id){
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          classDel({id}).then(res=>{
            var index=this.classList.findIndex(item=>{
               item.id==id
            })
            this.classList.splice(index,1)
            this.getClassList()
         })
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
         
      }
  },
};
</script>
<style lang='scss' scoped>
   .el-card{
      margin: 30px;
   }
   .el-pagination{
      padding-top: 20px;
   }
</style>